<template>
  <div>
    <n-image-group>
      <n-space>
        <n-image
          v-lazy
          v-for="item in resList"
          :key="item.id"
          :src="pre_oss_host + item.key"
        />
      </n-space>
    </n-image-group>
  </div>
</template>

<script lang='ts'>
import { IOssConditionModel, OSS_LIST_MODEL } from "../../apis/oss_model";
import { API_OSS_LIST, pre_oss_host } from "../../apis/oss";
import { onMounted, Ref, ref } from "@vue/runtime-core";
export default {
  name: "photo",
  data() {
    return {
      pre_oss_host,
    };
  },
  setup() {
    let resList: Ref<Array<any>> = ref([]);
    const ossConditionParams: IOssConditionModel = {
      pageSize: 20,
      pageNumber: 1,
    };
    const handleGetOssList = () => {
      API_OSS_LIST(ossConditionParams).then((res: OSS_LIST_MODEL) => {
        if (res.code == 200) {
          const { list, pagination } = res.data;
          resList.value = list;
        }
      });
    };
    onMounted(() => {
      handleGetOssList();
    });

    return {
      resList,
    };
  },
};
</script>